<!-- 用户管理-->
<div id="userPage" class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-form layui-table-filter">
            <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">用户名：</label>
                  <div class="layui-input-inline">
                    <input type="text" name="userName" id="userName" lay-verify="required" autocomplete="off"  placeholder="请输入用户名" class="layui-input">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">登录账号：</label>
                  <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" autocomplete="off"  placeholder="请输入登录账号" class="layui-input">
                  </div>
                </div>
                <button id="userSearchBtn" class="layui-btn icon-btn">查询</button>
                <button id="userResetBtn" class="layui-btn icon-btn">重置</button>
              </div>
        </div>
        <table id="userTable" class="layui-table" lay-filter="userTable"></table>
    </div>
    <div class="layui-col-md12" style="margin: 28px 0 0 0;"></div>
</div>
<script type="text/html" id="toolbarUser">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="addUser">添加用户</button>
      <button class="layui-btn layui-btn-sm" lay-event="trashUser">批量删除</button>
    </div>
</script>
<script type="text/html" id="barUser">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="sexTpl">
    {{#  if(d.sex === 'F'){ }}
      <span style="color: #F581B1;">女</span>
    {{#  } else { }}
    男
    {{#  } }}
</script>
<script type="text/html" id="userStateTpl">
    {{#  if(d.userState === 0){ }}
      <span style="color: #67dd5c;">正常</span>
    {{#  } else { }}
    <span style="color: #ca430e;">异常</span>
    {{#  } }}
</script>
<script type="text/html" id="userNameTpl">
    <span ><img style="width: 32px; height: 32px;" src='\src\img\avatar\{{ d.avatar}}'> {{ d.userName}}</span>
</script>
<script>
    layui.use(['table', 'base','index'], function () {
        var $ = layui.jquery,
        table = layui.table,
        layer = layui.layer,
        util = layui.util,
        base = layui.base;
        //用户表格
        var userTable = table.render({
            elem: '#userTable',
            url: '/baseService/user/layTable',
            method: 'post',
            contentType: 'application/json',
            toolbar: '#toolbarUser', //开启头部工具栏，并为其绑定左侧模板
            // headers: config.getHeaders(),
            where: {
                 orderColumn: 'createTime',
                 orderDir: 'asc',
            },
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count', 'limit', 'refresh'], //自定义分页布局
                curr: 1, //设定初始在第 5 页
                groups: 3, //只显示 1 个连续页码
                limit: 10,
                limits: [5,10,20,50],
                first: false, //不显示首页
                last: false //不显示尾页
            },
            cols: [[
                {type:'checkbox'},
                {field: 'id', hide: true},
                {field: 'userName', title: '用户名', sort: true, width: 140, event: 'userName', templet: '#userNameTpl',},
                {field: 'loginAccount', title: '登录账号', sort: true, width: 140},
                {field: 'mobile', title: '手机'},
                {field: 'email', title: '邮箱', width: 200},
                {field: 'sex', templet: '#sexTpl', title: '性别'},
                {field: 'userState', templet: '#userStateTpl', title: '状态'},
                {field: 'createTime', title: '创建时间', sort: true, width: 180},
                {fixed: 'right', align: 'center', toolbar: '#barUser', fixed:'right', title: '操作',width: 220}
            ]],
            response: {
                statusCode: 200 //规定成功的状态码，默认：0
            },
            done: function (res, curr, count) {
            }
        });

        //头工具栏事件
        table.on('toolbar(userTable)', function(obj){
            switch(obj.event){
                case 'addUser':       //添加用户
                base.removeSessionData('fs_user');
                base.open({
                    title: "添加用户",
                    id:"addUserLayer",
                    path: 'userAdd.html',
                    finish: function () {
                        table.reload('userTable');
                    }   
                });
                break;
                case 'trashUser':       //删除用户
                var checkStatus = table.checkStatus(obj.config.id).data;
                var ids=[], names=[];
                if (checkStatus.length < 1) {
					layer.alert("请至少选择一条数据！");
					return false;
				}
				checkStatus.forEach(function(item, index) {
					ids.push(item.id);
                    names.push(item.userName);
				})
                debugger
                layer.confirm("确认要删除用户："+names.toString()+"？", {icon: 3, title:'提示'}, function(index){
                    base.fsAjax('/baseService/user/batchDel'+ids.toString(), {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 200) {
                            table.reload('userTable');
                            base.msgSuccess(data.msg);
                        } else {
                            base.msgError(data.msg);
                        }
                    }, 'POST');
                });
                break;
            };
        });

        //监听行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认要删除用户：'+data.userName+'？', function(index){
                    base.fsAjax('/baseService/user/logicalDel/'+data.id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 200) {
                            table.reload('userTable');
                            base.msgSuccess(data.msg);
                        } else {
                            base.msgError(data.msg);
                        }
                    }, 'POST');
                });
            } else if(obj.event === 'edit'){
                base.putSessionData('fs_user', data);
                base.open({
                    title: "编辑用户",
                    id:"editUserLayer",
                    path: 'userEdit.html',
                    finish: function () {
                        base.removeSessionData('fs_user');
                        table.reload('userTable');
                    }   
                });
            }else if(obj.event === 'userName'){
                base.putSessionData('fs_user', data);
                base.open({
                    title: "用户信息",
                    id:"viewUserLayer",
                    path: 'userView.html',
                    finish: function () {
                        base.removeSessionData('fs_user');
                        table.reload('userTable');
                    }   
                });
            }
        });

        // 查询用户
        $('#userSearchBtn').click(function () {
            table.reload('userTable', {
                where: {
                    userName: $('#userName').val(),
                },
                page:{curr:1}
            });
        });

        // 重置用户
        $('#userResetBtn').click(function () {
            $('#userName').val('');
            table.reload('userTable', {
                where: {
                    userName: $('#userName').val(),
                },
                page:{curr:1}
            });
        });
    });
</script>